<template>
  <div class="custom-page">
    <template v-if="isMobile">
      <template v-if="pageData.all && pageData.all.length > 0">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__slideInLeft"
        >
          <div class="mobile-left hide-scroller-bar">
            <a-row class="modules-row" :gutter="[12, 0]">
              <template v-for="(item, index) of pageData.all" :key="index">
                <a-col
                  :span="item.columns == 2 ? 24 : 12"
                  class="modules-col"
                  :style="{ height: item.rows == 2 ? '50%' : '25%' }"
                >
                  <ModuleItem :data="item" />
                </a-col>
              </template>
            </a-row>
          </div>
        </transition>
      </template>
    </template>
    <template v-else>
      <template v-if="pageData.left && pageData.left.length > 0">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__slideInLeft"
        >
          <div class="left">
            <a-row class="modules-row" :gutter="[12, 0]">
              <template v-for="(item, index) of pageData.left" :key="index">
                <a-col
                  :span="item.columns == 2 ? 24 : 12"
                  class="modules-col"
                  :style="{ height: item.rows == 2 ? '50%' : '25%' }"
                >
                  <ModuleItem :data="item" />
                </a-col>
              </template>
            </a-row>
          </div>
        </transition>
      </template>
      <template v-if="pageData.right && pageData.right.length > 0">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__slideInRight"
        >
          <div class="right">
            <a-row class="modules-row" :gutter="[12, 0]">
              <template v-for="(item, index) of pageData.right" :key="index">
                <a-col
                  :span="item.columns == 2 ? 24 : 12"
                  class="modules-col"
                  :style="{ height: item.rows == 2 ? '50%' : '25%' }"
                >
                  <ModuleItem :data="item" />
                </a-col>
              </template>
            </a-row>
          </div>
        </transition>
      </template>
    </template>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  ref,
  nextTick,
} from "vue";
import request from "../../../../common/utils/request";
import store from "../../../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import {
  LoadingOutlined,
  CheckCircleOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";
import ModuleItem from "./ModuleItem.vue";

export default defineComponent({
  name: "CustomSynthetical",
  components: { ModuleItem },
  props: {
    village: {
      type: Object,
      default: () => {},
    },
  },

  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({});
    const pageData = computed(() => {
      let data = store.getters.syntheticalCustom;
      if (data && data.left && data.right) {
        data.all = data.left.concat(data.right);
      }
      return data || {};
    });

    /** -----适配移动端 start -----**/
    const isMobile = computed(() => store.getters.dataVMobile);

    const init = () => {
      console.log(pageData.value);
    };

    init();

    return {
      ...toRefs(state),
      pageData,
      isMobile,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/vars.less";
@import "../../styles/common.less";
.custom-page {
  .left {
    position: fixed;
    z-index: 30;
    left: @bodyLRPadding;
    top: @headerHeight + 1rem;
    bottom: @tabHeight;
    width: 40rem;
    pointer-events: auto;
    height: 85%;
  }

  .right {
    position: fixed;
    z-index: 30;
    right: @bodyLRPadding;
    top: @headerHeight + 1rem;
    bottom: @tabHeight;
    width: 40rem;
    pointer-events: auto;
    height: 85%;
  }

  .modules-row {
    height: 100%;
    align-content: flex-start;

    .modules-col {
    }
  }

  .mobile-left {
    position: fixed;
    z-index: 30;
    left: @bodyLRPadding;
    top: @headerHeight + 1rem;
    bottom: @tabHeight;
    width: calc(100% - @bodyLRPadding - @bodyLRPadding);
    pointer-events: auto;
    height: 85%;
    overflow: hidden auto;
  }
}
</style>
